<template>
  <div className="w-full h-full box-border px-2">
    <div className="flex justify-between items-center">
      <span>联系人</span>
      <v-icon
        :icon="mdiAccountMultiplePlus"
        size="50"
        @click="router.push('/find')"
      />
    </div>
    <v-divider class="border-opacity-100" />
    <div
      className="flex justify-between items-center"
      @click="router.push('/addMsg')"
    >
      <span>新朋友</span>
      <v-icon :icon="mdiChevronRight" size="50" />
    </div>
    <v-divider class="border-opacity-100" />
    <div
      v-for="(item, index) in list"
      :key="index"
      :className="
        'w-full h-[10vh] flex px-[2vw] py-[1vh] box-border justify-between ' +
        (item.activeStatus === 2 && 'opacity-80')
      "
      @click="toFriend(item.id)"
    >
      <div className="basis-1/6 flex items-center">
        <v-avatar :image="userInfo.getHeader(item.avatar)" size="40"></v-avatar>
      </div>
      <div className="basis-5/6">
        <div>
          <span>{{ item.username }}</span>
        </div>
        <div>
          <span>[{{ activeState.get(item.activeStatus) }}]</span>
          <v-icon
            :icon="item.sex === 1 ? mdiGenderMale : mdiGenderFemale"
            size="20"
            :color="item.sex === 1 ? 'blue-darken-3' : 'pink-darken-1'"
          />
        </div>
      </div>
    </div>
  </div>

  <friendInfo ref="friendBar" />
</template>

<script lang="ts" setup>
import { getFriendList } from "@/api";
import { useUserInfoStore } from "@/store/userInfo";
import {
  mdiAccountMultiplePlus,
  mdiChevronRight,
  mdiGenderFemale,
  mdiGenderMale,
} from "@mdi/js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { activeState } from "@/utils/commonType";

const router = useRouter();
const userInfo = useUserInfoStore();
const friendBar = ref();

const list = ref();

// 查看好友信息
const toFriend = (id: number) => {
  friendBar.value.getUserInfo(id);
}

onMounted(() => {
  // 获取好友信息
  getFriendList(userInfo.user.id).then((res) => (list.value = res));
});
</script>
